<template>
  <div>
    <van-form validate-first @submit="submitForm()" class="passForm">
      <van-field
        placeholder="请输入手机号/邮箱"
        clearable
        type="text"
        v-model="passForm.username"
      >
        <template #left-icon> <i class="el-icon-user"></i> </template
      ></van-field>
      <van-field
        v-model="passForm.password"
        autocomplete="off"
        clearable
        placeholder="请输入密码"
        type="password"
      >
        <template #left-icon> <i class="el-icon-lock"></i> </template
      ></van-field>
      <div class="forget-sigin-content">
        <a @click="forgotPassword">忘记密码？</a>
        <a @click="signIn">立即注册</a>
      </div>
      <van-button
        block
        type="info"
        v-if="useLoadingButton"
        class="f16"
        :disabled="isBadSubmit"
        :loading="loading"
        native-type="submit"
        >{{ submitText }}</van-button
      >
      <van-button
        block
        type="info"
        v-else
        class="f16"
        :disabled="isBadSubmit"
        native-type="submit"
        >{{ submitText }}</van-button
      >
      <div class="operate-pass">
        <van-checkbox
          v-model="agreeDoc"
          ref="docCheck"
          icon-size="12px"
          class="f12"
          checked-color="#0080ff"
          >阅读并接受
          <a style="color: #0080ff" @click.prevent="openDoc"
            >《荣大科技用户协议》</a
          >
        </van-checkbox>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getRSAKey, loginByPass } from 'api/modules/login.api';

// rsa的key失效的返回code
const RSA_FAIL_CODE = -518;

export default {
  data() {
    return {
      passForm: {
        username: '',
        password: '',
      },
      agreeDoc: false,
      rememberPass: false,
      badSubmit: true,
      loading: false,
    };
  },
  props: {
    submitText: {
      type: String,
      default: '提交',
    },
    linkFlag: {
      type: Boolean,
      default: false,
    },
    notUseLoginPost: {
      type: Boolean,
      default: false,
    },
    useLoadingButton: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    isBadSubmit() {
      const { username, password } = this.passForm;
      return !username || !password;
    },
  },
  created() {},
  methods: {
    // 忘记密码
    forgotPassword() {
      this.$loginUtils.toCloud(
        this.globalProcessData.getUrl().crmUrl,
        'toUpdateUserPwdOne'
      );
    },
    // 立即注册
    signIn() {
      this.$loginUtils.toCloud(
        this.globalProcessData.getUrl().crmUrl,
        'toUserRegisterOne?channel=th_web'
      );
    },
    openDoc() {
      // 待优化，下面硬写点击打开协议不触发checkbox选中
      setTimeout(() => {
        this.$refs.docCheck.toggle();
      }, 10);
      window.open(
        'http://ibsaas-crm.rongdasoft.com:19002/registAgreement',
        '__blank'
      );
    },
    // 登录接口publicKeyCode无效，重新获取
    async rsaFailure() {
      const { data } = await getRSAKey();
      if (!data) {
        this.$toast.fail('系统异常，请刷新重试');
        return;
      }
      this.submitForm(data);
    },
    async submitForm(newKey) {
      if (!this.agreeDoc) {
        this.$toast('请先勾选并同意荣大科技用户协议');
        return;
      }
      if (!newKey && !this.globalProcessData.getPublicKey()) {
        this.rsaFailure();
        return;
      }
      const { username, password } = this.passForm;
      const params = {
        data: {
          username,
          password: this.$loginUtils.getCode(
            password,
            newKey || this.globalProcessData.getPublicKey()
          ),
          publicKey: newKey || this.globalProcessData.getPublicKey(),
          linkFlag: this.linkFlag,
        },
        loginType: 'web',
      };
      this.$set(params, 'mode', 'passLogin');
      this.$emit('beforeLogin', params);
      if (this.notUseLoginPost) {
        return;
      }
      const response = await loginByPass(params);
      const { data, code, msg } = response;
      // 如果是失效的话重新获取key，并登录
      if (code === RSA_FAIL_CODE) {
        this.rsaFailure();
        return;
      }
      if (code !== 0) {
        this.$toast.fail(msg);
        this.loading = false;
      } else {
        this.$set(data, 'rememberPass', this.rememberPass);
      }

      this.$emit('submitForm', response);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.is-active {
  color: #0062ff;
  cursor: pointer;
}
</style>

<style lang="less" scoped>
.passForm {
  .operate-pass {
    margin-top: 12px;
    color: #606266;
    > a {
      cursor: pointer;
      font-size: 12px;
    }
    margin-bottom: 36px;
  }
  .forget-sigin-content {
    display: flex;
    margin-bottom: 24px;
    height: 16px;
    justify-content: space-between;
    font-size: 12px;
    > a {
      color: #606266;
    }
  }
}
</style>
